<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>01_元素内容操作</title>
        <!-- 01_元素内容操作：元素以及元素内容的部分
		 .html()           无参---功能：获取匹配元素中第一元素的内容
		                   有参---功能：将匹配元素集合中所有元素替换成新元素
		特点：针对 内容  +  元素
		 .val()            无参---功能：表单内元素：input,select生效
									 获取表单元素中第一元素的内容
		                   有参---功能：表单内元素：input，select生效
		                    input元素直接显示 value
		                          select元素不是显示 value
								  option 元素中内容：用户显示
								  option 元素中value值，必须当前select中
								  必须当前select中，option元素value值
								  直接赋值：打印select元素对象名称[object Object]
		特点：针对（表单内form元素可以包裹）元素的内容 
		 .text()                  无参---功能：获取匹配元素集合中所有元素的文本内容
		                          有参---功能：【设置】陪陪元素集合中所有元素的文本内容替换
		特点：元素中存在内容
		 -->
		 <script src="../js/jquery-1.11.1.js"></script>
	</head>
	<body>
		<button>按钮-针对html()函数-有参</button>
		<span>lorem1</span>
		<span>lorem2</span>
		<h1>val()函数使用</h1>
		<button>按钮-针对val（）函数-无参</button>
		<input type="text" value="文本框真实的数据1" />
		<input type="text" value="文本框真实的数据2" placeholder="输入框显示效果[提示]" />
		<!-- html:下拉列表  select>option*3需要加value -->
		<!-- jq： 点击按钮，设置下拉列表的值 | html（）和val（）有参是否存在区别 -->
		<button>按钮-针对val（）函数-有参</button>
		<select>
			<option value="rem1">lorem1</option>
			<option value="rem2">lorem2</option>
			<option value="rem3">lorem3</option>
		</select>
		<h1>text()函数使用</h1>
		<button class="btn1">按钮-针对text()函数-无参</button>
		<button class="btn2">按钮-针对text()函数-有参</button>
		<p>lorem4</p>
		<p>lorem5</p>
		<p>lorem6</p>
		
		<script>
			//1.找到 类名为 btn1 的按钮--点击---弹窗内容为三个p元素内容
			$(".btn1").click(function(){
			var	 ptext=$("p").text();
			alert(ptext);
			});
			//2.找到 类名为 btn2 的按钮--点击---lorem4\5\6改为 "修改文本"[有参]
			$(".btn2").click(function(){
			var	 ptext=$("p").text("修改文本");
			alert(ptext);
			});
			
			
			$("button").click(function(){
				//抓下拉列表的value值---select
				//设置元素第一个的值  1.直接设置下拉列表中value的值
				$("selecft").val("rem1");
				//设置元素第一个的值  2.给第一个值添加设置好的内容【本身存在】
				var rem=$("select").val();
				//[object Object]JavaScript中  对象的默认字符串表示形态
				//select元素 对象 输出Object
				
				//value的值：真实数据 option中值：显示数据
				//object Object 测试：无参
				alert("val()函数有参:"+rem)
			})
			//动态效果：点击效果，获取第一个表单元素的内容，元素打印出来
			//$("button").click(function(){
				/* 注意：js变量名不可以为关键字！ ins是关键字  */ 
			//	var ins=$("input").val();
			//	alert("val()函数无参："+ins)
			//});
			
			
			//有参：点击按钮--下面两个span 改成lorem，lorem
			//$("button").click(function(){
			//	$("span").html("<span>lorem</span>");
		//	});
			
			//js变量【int i=1】==jq变量  var 变量名=值，元素
			//无参数  html（）函数使用
			//var html=$("span").html();
			// BOM方式 打印数据
			//alert("无参数获取第一个元素内容:"+html);
			
		</script>
	</body>
</html>